<template>
    <div id="container">
      <div id="viewDiv"></div>
    </div>
  </template>
     
  <script setup>
  import {onMounted} from 'vue'
  import Map from '@arcgis/core/Map'
  import MapView from '@arcgis/core/views/MapView'
  import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
  import Legend from '@arcgis/core/widgets/Legend'
  var map,view,layer,legend
  var 边线={
      color:"gray",  width:0.5//如果width为0则不再显示边线
  }
  var renderer = {
      type:"class-breaks",
      field: "POP2007",
      legendOptions: {
          title: "2007年数据"
      },
      defaultSymbol: { //创建默认符号,如果不设置边线,则默认为黑色
          type:"simple-fill",
          color: [150, 150, 150, 0.5] ,
          outline:边线
      },
      defaultLabel: "其他",//默认符号图例名称
      classBreakInfos: [{
          minValue: 0,
          maxValue: 10000000,
          symbol: { 
              type:"simple-fill",
              color: [56, 168, 0, 0.5], 
              outline:边线
          },
          label: "少于1千万"
          }, {
          minValue: 10000000,
          maxValue: 50000000,
          symbol: { 
              type:"simple-fill",
              color: [139, 209, 0, 0.5] ,
              outline:边线 
          },
          label: "1千万-5千万"
          }, {
          minValue: 50000000,
          maxValue: 100000000,
          symbol: { 
              type:"simple-fill",
              color: [255, 255, 0, 0.5],
              outline:边线
          },
          label: "5千万-1亿"
          }, {
          minValue: 100000000,
          maxValue: 500000000,
          symbol: { 
              type:"simple-fill",
              color: [255, 128, 0, 0.5],
              outline:边线
          },
          label: "1亿-5亿"
          }, {
          minValue: 500000000,
          maxValue: Infinity,
          symbol: { 
              type:"simple-fill",
              color: [255, 0, 0, 0.5],
              outline:边线
          },
          label: "大于5亿"
      }]
  }
  var layerUrl = "https://services.arcgis.com/BG6nSlhZSAWtExvp/ArcGIS/rest/services/Demographics_World_Simp/FeatureServer/0";
  var layer = new FeatureLayer({
      url:layerUrl, 
      renderer: renderer//绑定渲染器
  })
  
  onMounted(()=>{
      map = new Map({
          basemap: "hybrid",layers: [layer]
      })
      view = new MapView({
          container: "viewDiv",  map: map, center:[120.2,36.2], zoom:3,
          constraints:{
            rotationEnabled:false
          }
      })
      legend = new Legend({
        view: view,
        layerInfos: [
            {
                layer: layer
            }
        ]
    })
    view.ui.add(legend, "top-left");
    view.ui.remove(["zoom","attribution","compass","navigation-toggle"])
  })
  </script>
  
  <style scoped>
  #container,#viewDiv{
    width:100%; height:100%; padding:0;margin:0;
  }
  </style>
  